<!-- 记事本添加 -->
<template>
	<view>
		<div>
			<navitop> 
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outs"></i>
				<span slot="center-slot">{{title}}</span>
				<!-- <i  slot="right-slot" >
					<i class="iconfont icon-jiahao" style="font-size: 25px;padding-left: 15px;" @click="bubble"></i>
				</i> -->
			</navitop>
		</div>
		<div :style="'margin-top:' + nv_height " class="eve_add">
			<div class="eve_out">
				<div class="eve_title">
					<input placeholder="标题" v-model="titles"/>
				</div>
				<div class="eve_class" @click="class_bottom">
					<div v-if="contentType_name">{{contentType_name}}</div>
					<div v-else>未分类</div>
				</div>
				<div>
					<textarea v-model="content" class="texttar_style" auto-height placeholder="内容" />
				</div>
			</div>
			<div class="bottom_style" @click="list_save">
				<text>保&nbsp;存</text>
			</div>
		</div>
		
		<popus ref="alert">
			<div class="alert_out">
				<div class="alert_top">
					<div class="alert_left"></div>
					<div class="alert_right" @click="class_add"><i class="iconfont icon-jiahao" style="padding: 0 8px 0 0" ></i>新建分类</div>
				</div>
				<div class="alert_class">
					<scroll-view class="staff_b" scroll-y="true" touch-action=auto; >
						<div class="alert_list" v-for="(item,index) in dataSorce" @click="select_data(item)">
							{{item.dictValue}}
						</div>
					</scroll-view>	
				</div>
			</div>
		</popus>
		
		<popus ref="alert_center">
			<div class="alert_center_out" :style="'width:' + al_width">
				<div><h3>新建分类</h3></div>
				<div class="alert_center_int"><input v-model="dictValue"></div>
				<div class="bottom">
					<div class="bottom_op" @click="close_center">取消</div>
					<div class="bottom_op" @click="close_ok">确定</div>
				</div>
			</div>
		</popus>
	</view>
</template>

<script>
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import navitop from '@/components/common/navi-top'
	import {pageList,dictpage,persave,saveUpdate} from '@/common/api/my/myapi.js'
	import {dictType} from '@/common/api/table.js'
	export default {
		components:{
			navitop,
			popus
		},
		data(){
			return {
				title: '',
				nv_height: '',
				al_width: '',
				dataSorce: '',
				na_class: {},
				titles: '',	 // 标题
				content: '',	// 输入类容
				contentType:'',	// 分类
				uid: ''	,// 用户id
				
				dictValue:'',
				newDataList: {},	// 当前最后一条数据
				contentType_name:'',	// 分类显示
				
			}
		},
		onLoad(option) {
			this.title = option.title;
			
		},
		mounted() {
			this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
			
			this.uid = uni.getStorageSync('userInfo').userId;
			
			this.al_width = uni.getSystemInfoSync().screenWidth - 40 + 'px'
			
			this.zd_list();
			
		},
		methods:{
			// 返回
			outs(){
				uni.navigateTo({
					url: '/pages/common/my/subpage/evaluate/evaluate?title=记事本'
				})
			},
			
			// 底部分类弹窗
			class_bottom(){
				this.$refs.alert.open('bottom')
			},
			
			// 选中弹窗类容
			select_data(val){
				this.contentType = val.id;
				this.contentType_name = val.dictValue;
				this.$refs.alert.close();
			},
			
			close_center(){
				this.$refs.alert_center.close();
			},
			
			// 分类添加
			close_ok(){
				let _this = this;
				let updata ={};
				if(!this.dictValue){
					uni.showToast({
						title: '请输入分类名称',
						icon: 'none'
					})
					return false;
				}
				uni.showLoading({
					title: '保存中...'
				})
				updata['companyId'] = 1;
				updata['createBy'] = 1;
				updata['description'] = null;
				updata['dictCode'] = "person_note";
				updata['dictLabel'] = Number(this.newDataList[0].dictLabel) + 1;
				updata['dictName'] = "记事本";
				updata['dictType'] = 1;
				updata['dictTypeId'] = 108;
				updata['dictValue'] = this.dictValue;
				updata['isDefault'] = true;
				updata['isSys'] = true;
				updata['showSort'] = this.newDataList[0].showSort + 1;
				updata['status'] = 0;
				updata['updateBy'] = 1;
				updata['moduleType'] = "SCM";
				updata['key'] = 116;
				updata['isUpdate'] = false;
				saveUpdate(updata).then(item => {
					if(item.code == 200){
						uni.hideLoading();
						this.$refs.alert_center.close();
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						setTimeout( ()=> {
							_this.zd_list();
						},1500)
					}
				})
			},
			
			// 分类新建
			class_add(){
				this.$refs.alert.close();
				this.$refs.alert_center.open('center');
				
			},
			
			// 获取分类列表
			zd_list(){
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				dictType().then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						rows.data.records.filter(function(item) {
							if(item.dictCode === "person_note"){
								_this.na_class = item;
							}
						})
					}
					dictpage({'page.size':-1,'dictTypeId':_this.na_class.id}).then((rst) => {
						if(rst.code == 200){
							this.dataSorce = rst.data.records;
							this.dataSorce.unshift({dictValue: '未分类',id: ''})
							this.newDataList = this.dataSorce.slice(-1);
						}
					})
				})
			},
			
			// 保存
			list_save(){
				let _this = this;
				let sun_value = {
					'title': this.titles,
					'content': this.content,
					'type': 2,
					'userId': this.uid,
					'contentType': this.contentType
				}
				uni.showLoading({
					title: '加载中...'
				})
				
				
				persave(sun_value).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(()=> {
							_this.outs();
						},1500)
					}
				})
			},
			
			// 区分类型
			class_value(val){
				let _this = this;
				this.dataSorce.filter(function(item) {
					if(item.dictValue == val){
						_this.contentType = item.id
					}
				}) 
			}
			
		}
	}
	
</script>

<style scoped lang="scss">
	
// 中间弹窗
.alert_center_out {
	background: #fff;
	border-radius: 4px;
	padding: 30px 0 20px 0;
	div {
		margin-left: 20px;
	}
}	

.bottom {
	padding: 20px 0 10px 150px;
	display: flex;
}

.alert_center_int {
	padding: 10px 0 10px 0;
	input {
		border: 0;
		border-bottom: 1px solid #2283E4;
		border-radius: 0;
		width: 90%;
	}
}

.bottom_op {
	color: #2283E4;
	width: 30%;
	text-align: center;
	padding: 5px 0 0 0;
}
	
// 底部弹窗
.alert_out {
	height: 400px;
	background-color: #fff;
	
}	

.alert_top {
	height: 40px;
	line-height: 40px;
	display: flex;
	border-bottom: 1px solid #f0f0f0f0;
	justify-content: space-between;
	.alert_left {
		width: 30%;
		text-align: center;
	}
	.alert_right {
		width: 30%;
		text-align: center;
		padding: 0 10px 0 0;
		color: #2283E4;
	}
}

.alert_class {
	height: 355px;
}

.staff_b {
	 height: 100%;
}

.alert_list {
	height: 40px;
	line-height: 40px;
	padding: 0 0 0 20px;
}
	
.eve_add {
	width: 100%;
	.eve_out {
		background-color: #fff;
		width: 95%;
		margin: auto;
		div {
			line-height: 60rpx;
			padding:  0 0 0 30rpx;
		}
		.eve_title {
			height: 90rpx;
			line-height: 90rpx;
			input {
				height: 90rpx;
				font-size: 25px;
				border: 0;
				width: 90%;
			}
		}
		.eve_list {
			padding: 0 0 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
		}
		.eve_class {
			width: 90%;
			margin: auto;
			color: grey;
		}
	}
	
}
.bottom_style {
	text-align: center;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 25px;
	color: #fff;
	background-color: rgb(34, 131, 228);
}

.texttar_style {
	min-height: 200px;
	margin: 10px 0 10px 0;
}

</style>
